<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历    用于DOM树中遍历元素  【理解：针对元素嵌套，父子级】
		 children()          功能：获取匹配元素集合中每个元素的子元素
		 parent()            功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings()          功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()              功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()              功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()              功能：便利匹配元素的集合---遍历所有子元素
							 语法糖：each(function(index,element){
								 $(element).text('')
								 注意：打印遍历的值，不可以使用单双引号+拼接
								 功能：获取到的元素，遍历元素内容
							 })
							   index： 下标   element：元素  形参
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.container {
				border: 1px solid #aaaaff;
				margin: 10px;
				padding: 10px;
			}

			.box {
				background-color: #aaff7f;
				margin: 10px;
				padding: 10px;
			}

			button {
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<!-- html:     div.container  父级  6个div.box  每个#box1....（子级）
		                  6个按钮
			 css:      .container添加样式  边框1px、内外边距10px
			           .box添加样式     背景色  内外边距10px
			           button添加样式   外边距5px
			 jq引入
		 -->
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟</button>
		<button id="gr">获取上一个兄弟</button>
		<button id="loop">遍历元素</button>
		<script>
			/* 1.点击 获取子元素  按钮   实现.container下所有子元素添加背景色 */
			$("#gc").click(function() {
				//通过 父找子  函数----添加效果
				$(".container").children().css("background-color", "antiquewhite");
			});
			/* 2.点击 获取父元素  实现.container 添加背景色 */
			$("#gp").click(function() {
				$("#box2").parent().css("background-color", "aliceblue");
			});
			/* 3.点击 获取兄弟元素 按钮   实现除了#box4 字体颜色不变，其他变色 */
			$("#gs").click(function() {
				$("#box4").siblings().css("background-color", "aqua");

			});
			/* 4.点击 获取下一个兄弟元素 按钮 实现#box4 下一个兄弟 添加背景色 */
			$("#gn").click(function() {
				$("#box4").next().css("background-color", "#ffaa7f");
			});
			/* 5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟 添加效果:圆、背景色、背景图、盒子阴影*/
			$("#gr").click(function() {
				$("#box6").prev().css({
					"background-color": "#ffa",
					"background-image": "url(../img/2.gif)",
					"height": "100px",
					"width": "100px",
					"border-radius": "50%",
					"box-shadow": "2px 2px 5px #9ceec8",
					"background-size": "100% 100%",
					"font-size": "0"
				});
			});
			/* 6.点击  遍历元素    按钮   实现每个盒子上，这是第几个盒子*/
			$("#loop").click(function() {
				//通过  .box 抓到6个元素【一组基和】
				$(".box").each(function(i, e) { //e:代表元素   i:代表下标
					//每个盒子加文字：这是第几个盒子
					$(e).text(`这是第${i+1}盒子`);
				});
			});
		</script>
	</body>
</html>